<template>
  <div class="choose-view">
    <div class="bread-con">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: 'desiredResult' }">期望结果</el-breadcrumb-item>
        <el-breadcrumb-item>{{caseBread}}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="add-case-con">
      <el-form ref="form" :model="form" label-width="120px" :rules="rules">
        <el-form-item label="期望结果名称：" prop="expectName">
          <el-input v-model="form.expectName"></el-input>
        </el-form-item>
        <el-form-item label="case编号：" prop="caseName">
          <template>
            <el-button type="text" @click="dialogTableVisible = true">{{form.caseNumber}}</el-button>
            <el-dialog title="case列表" :visible.sync="dialogTableVisible">
              <el-form :inline="true" :model="form">
                <el-form-item label="case名称：">
                  <el-input v-model="form.searchName" auto-complete="on"></el-input>
                </el-form-item>
                <el-form-item label="case编号：">
                  <el-input v-model="form.searchNum"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="onSubmit">查询</el-button>
                </el-form-item>
              </el-form>
              <el-table :data="gridDataList" @row-click="rowClick">
                <el-table-column
                  prop="caseNumber"
                  align="center"
                  label="case编号">
                </el-table-column>
                <el-table-column
                  prop="caseName"
                  align="center"
                  label="case名称">
                </el-table-column>
              </el-table>
              <div class="choose-page">
                <test-page :table-list="gridDataList" :table="gridData" @get-table-list="getPageList"
                           @get-table-data="getPageData" :url="dataUrl" :query-data="search"></test-page>
              </div>
            </el-dialog>
          </template>
        </el-form-item>
        <el-form-item label="case名称：">
          <span>{{form.caseName}}</span>
        </el-form-item>
        <el-form-item label="case分类：">
          <span>{{form.caseTypeName}}</span>
        </el-form-item>
        <el-form-item label="step：">
          <template>
            <div class="result-temp-div add-temp-num">编号</div>
            <div class="result-temp-div">操作步骤</div>
            <div class="result-temp-div">期望结果</div>
            <div class="result-temp-div">期望结果数据</div>
          </template>
        </el-form-item>
        <el-form-item label=" ">
          <template v-for="(v, k) in step">
            <div class="result-temp-div add-temp-num">
              {{k+1}}
            </div>
            <div class="result-temp-div">
              {{v.step}}
            </div>
            <div class="result-temp-div">
              {{v.expectResult}}
            </div>
            <div class="result-temp-div">
              <el-input v-model="v.expectData"></el-input>
            </div>
          </template>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm(form)">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script type='text/ecmascript-6'>
  import Page from '@/components/testPage.vue';
  const sucStatus = 200;
  export default {
    data() {
      var validateCaseName = (rule, value, callback) => {
        if (!value) {
          callback(new Error('请输入pre-data'));
        } else {
          callback();
        }
      };
      var validateCaseNumber = (rule, value, callback) => {
        if (!value) {
          callback(new Error('请输入期望结果名称'));
        } else {
          callback();
        }
      };
      return {
        form: {
          id: '',
          expectName: '',
          searchName: '',
          searchNum: '',
          caseTypeName: '请选择case',
          caseId: '',
          caseName: '请选择case',
          caseNumber: '请选择case'
        },
        search: '',
        dataUrl: 'http://192.168.59.99:8080/automatedtest/automated/caseList',
        gridDataList: [],
        gridData: {},
        dialogTableVisible: false,
        caseBread: '新增期望结果',
        defPageSize: 10,
        defPageNum: 1,
        edit: false,
        step: [],
        rules: {
          expectName: [
            {validator: validateCaseNumber, trigger: 'blur'}
          ],
          preDataDetail: [
            {validator: validateCaseName, trigger: 'blur'}
          ]
        }
      };
    },
    components: {
      'test-page': Page
    },
    created () {
      let type = this.$route.params.templateType;
      if (type) {
        this.caseBread = '编辑期望结果';
        this.edit = type;
        this.form.id = type.expectId;
        this.form.caseName = type.caseName;
        this.form.caseNumber = type.caseNumber;
        this.form.expectName = type.expectName;
        this.$ajax({
          method: 'GET',
          url: 'http://192.168.59.99:8080/automatedtest/automated/expect/step?caseId=' + type.caseId + '&expectId=' + type.expectId
        }).then((response) => {
          if (response.status === sucStatus) {
            this.step = response.data.data;
          }
        }).catch(() => {
          this.$message('网络错误');
        });
      }
      this.$ajax({
        method: 'GET',
        url: 'http://192.168.59.99:8080/automatedtest/automated/caseList?pageSize=10&pageNum=1'
      }).then((response) => {
        if (response.status === sucStatus) {
          this.gridDataList = response.data.data.list;
          this.gridData = response.data.data;
        }
      }).catch(() => {
        this.$message('网络错误');
      });
    },
    methods: {
      rowClick: function (r, c, cell, ev) {
        this.dialogTableVisible = !this.dialogTableVisible;
        this.form.caseId = r.caseId;
        this.form.caseName = r.caseName;
        this.form.caseNumber = r.caseNumber;
        this.form.caseTypeName = r.caseTypeName;
        this.$ajax({
          method: 'GET',
          url: 'http://192.168.59.99:8080/automatedtest/automated/caseList/caseStep?caseId=' + this.form.caseId
        }).then((response) => {
          if (response.status === sucStatus) {
            this.step = response.data.data;
            for (var i = 0; i < this.step.length; i++) {
              this.step[i].expectData = '';
            }
          }
        }).catch(() => {
          this.$message('网络错误');
        });
      },
      getPageList: function (list) {
        this.gridDataList = list;
      },
      getPageData: function (data) {
        this.gridData = data;
      },
      onSubmit() {
        this.search = `&caseName=${this.form.searchName}&caseNumber=${this.form.searchNum}`;
        this.getQueryData(this.search);
      },
      submitForm(formName) {
        formName.detail = [];
        for (var i = 0; i < this.step.length; i++) {
          var unit = {};
          if (this.edit) {
            unit.id = this.step[i].id;
          } else {
            unit.stepId = this.step[i].id;
          }
          unit.stepId = this.step[i].id;
          unit.expectData = this.step[i].expectData;
          formName.detail.push(unit);
        }
        this.$refs.form.validate((valid) => {
          if (valid) {
            if (this.form.caseName === '请选择case') {
              this.$message.error('请选择有效case');
              return;
            }
            if (this.edit) {
              this.form.expectId = this.edit.expectId;
              this.$ajax({
                method: 'PUT',
                url: 'http://192.168.59.99:8080/automatedtest/automated/expect',
                data: this.form
              }).then((response) => {
                if (response.status === sucStatus) {
                  let txt = '修改成功';
                  this.successMsg(txt);
                  window.history.go(-1);
                } else {
                  this.$message({
                    showClose: true,
                    message: response.data.message,
                    type: 'error'
                  });
                }
              }).catch(() => {
                this.$message('网络错误');
              });
            } else {
              this.$ajax({
                method: 'POST',
                url: 'http://192.168.59.99:8080/automatedtest/automated/expect',
                data: formName
              }).then((response) => {
                if (response.status === sucStatus) {
                  let txt = '添加成功';
                  this.successMsg(txt);
                  window.history.go(-1);
                } else {
                  this.$message({
                    showClose: true,
                    message: response.data.message,
                    type: 'error'
                  });
                }
              }).catch(() => {
                this.$message('网络错误');
              });
            }
          } else {
            return false;
          }
        });
      },
      successMsg(txt) {
        this.$message({
          message: txt,
          type: 'success'
        });
      },
      getQueryData: function (str) {
        this.$ajax({
          method: 'GET',
          url: `http://192.168.59.99:8080/automatedtest/automated/caseList?pageSize=${this.defPageSize}&pageNum=${this.defPageNum}${str}`
        }).then((response) => {
          if (response.status === sucStatus) {
            this.gridDataList = response.data.data.list;
            this.gridData = response.data.data;
          } else {
            this.$message({
              showClose: true,
              message: response.data.message,
              type: 'error'
            });
          }
        }).catch(() => {
          this.$message('网络错误');
        });
      }
    }
  };
</script>
<style lang="stylus" rel="stylesheet/stylus">
  .add-case-con
    width: 50%;

  .result-temp-div
    display: inline-block;
    width: 25%;
    margin-bottom: 10px;

  .add-temp-btn
    display: inline-block;

  .add-temp-num
    width: 15%;
</style>
